<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
    <title>BimAngle.com - Trial version</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.113/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.113/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<script type="module">
    var url = './gitf.gltf';
    var longitude = 116.432998657227;
    var latitude = 39.9160003662109;
    var height = 0;
    
    //set home view
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);

    //Please replace it with your own token
    const TIANDITU_TOKEN = '01e768fa9e1bcf33ae174c9231479793';

    //TianDiTu(https://www.tianditu.gov.cn/) - China Only
    var imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + TIANDITU_TOKEN,
        layer: 'tdtBasicLayer',
        style: 'default',
        format: 'tiles',
        tileMatrixSetID: 'GoogleMapsCompatible',
        show: true,
        maximumLevel: 18
    });

    var options;
    if (!!Cesium.ImageryLayer.fromProviderAsync) {
        // >= 1.104
        options = {
            baseLayer: Cesium.ImageryLayer.fromProviderAsync(imageryProvider)
        };
    } else {
        // < 1.104
        options = {
            imageryProvider: imageryProvider
        };
    }
    var viewer = window.viewer = new Cesium.Viewer('cesiumContainer', options);

    function flyToModel(model) {
        const v = Cesium.VERSION.split('.');
        if (v.length >= 2 && (parseInt(v[0]) > 1 || (parseInt(v[0]) == 1 && parseInt(v[1]) >= 96))) {
            // >= 1.96

            // In CesiumJS 1.96+, model.boundingSphere will be changed to return results in world space. 
            // The calling code will no longer need to multiply the bounding sphere by the model matrix.
            viewer.camera.flyToBoundingSphere(model.boundingSphere);
        } else {
            // < 1.96

            var center = new Cesium.Cartesian3();
            Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, center);
            var boundingSphere = new Cesium.BoundingSphere(center, model.boundingSphere.radius * 1.5);

            viewer.camera.flyToBoundingSphere(boundingSphere);
        }
    }

    var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
        Cesium.Cartesian3.fromDegrees(longitude, latitude, height)
    );
    Cesium.Matrix4.multiplyByMatrix3(modelMatrix, Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(-90.0)), modelMatrix); //fix gltf orientation
    var modelOptions = {
        url: url,
        modelMatrix: modelMatrix,
        scale: 1.0,
        dequantizeInShader: false,
        minimumPixelSize: 1.0
    };
    if (!!Cesium.Model.fromGltfAsync) {
        // >= 1.104

        const model = await Cesium.Model.fromGltfAsync(modelOptions);
        viewer.scene.primitives.add(model);
        model.readyEvent.addEventListener(() => flyToModel(model));
    } else {
        // < 1.104

        var primitive = viewer.scene.primitives.add(Cesium.Model.fromGltf(modelOptions));
        primitive.readyPromise.then(flyToModel);
    }
		
    var selectedEntity = new Cesium.Entity();
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(
        function (movement) {
            var pick = viewer.scene.pick(movement.position);
            if (Cesium.defined(pick) && Cesium.defined(pick.node)) {
                var node = pick.primitive.gltf.nodes[pick.node.id];
                selectedEntity.name = node.name || "<null>";
                selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
                viewer.selectedEntity = selectedEntity;
                if(node.extras){
                    selectedEntity.description = '<table class="cesium-infoBox-defaultTable"><tbody>' +
                        '<tr><th>DbId</th><td>' + node.extras.DbId + '</td></tr>' +
                        '<tr><th>ExId</th><td>' + node.extras.ExId + '</td></tr>' +
                        '</tbody></table>';
                }else{
                    selectedEntity.description = '<table class="cesium-infoBox-defaultTable"><tbody>' +
                        '</tbody></table>';
                }
            }
        },
        Cesium.ScreenSpaceEventType.LEFT_CLICK
    );

</script>
</body>
</html>